<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="bootstrap4/dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/nav-bottom.css">
    <link rel="stylesheet" href="css/index.css">
<!--    <script src="bootstrap4/dist/js/jquery.slim.min.js"></script>-->
    <script src="js/jquery-3.5.1.js"></script>
    <script src="bootstrap4/dist/js/bootstrap.bundle.min.js"></script>
<!--    给轮播图添加触摸事件-->
    <script src="js/lunbo-touch.js"></script>
    <script src="js/template-web.js"></script>
</head>
<body>

<div class="container-fluid">
    <!--轮播 开始-->
    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-touch="true">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="images/index/lunbo1.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-md-block text-left">
                    <h5>致冬日可爱的你</h5>
                    <p>生日快乐 甜蜜相伴</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/index/lunbo2.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-md-block text-left">
                    <h5>前方！财运天降</h5>
                    <p>新年限定财气新品  享限时立减</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/index/lunbo3.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-md-block text-left">
                    <h5>甜蜜冬日  “莓”你不行</h5>
                    <p>时令人气蛋糕 享限时8折</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/index/lunbo4.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-md-block text-left">
                    <h5>浪漫马卡龙  宠你在心头</h5>
                    <p>梦幻酸甜 粉粉宠爱</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/index/lunbo5.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-md-block text-left">
                    <h5>81层！匠心の味</h5>
                    <p>人气吐司低至￥28/半条 2份起享</p>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <!--轮播 结束-->
    <!--    小轮播开始-->
    <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleFade" data-slide-to="1"></li>
            <li data-target="#carouselExampleFade" data-slide-to="2"></li>
            <li data-target="#carouselExampleFade" data-slide-to="3"></li>
            <li data-target="#carouselExampleFade" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="images/index/lunbo6.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="images/index/lunbo7.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="images/index/lunbo8.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="images/index/lunbo9.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="images/index/lunbo10.jpg" class="d-block w-100" alt="...">
            </div>
        </div>
        <a class="carousel-control-prev d-none" href="#carouselExampleFade" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next d-none" href="#carouselExampleFade" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <!--    小轮播开始-->
    <!--    大商品展示 开始-->
    <div class="w-100 shangpingtu">
        <a href="javascript:void(0)" class="d-block w-100 position-relative">
            <div class="position-absolute">
                <p>雪域燕麦芝士·轻享 <br>甄选OATLY燕麦露 轻享香甜浓滑</p>
            </div>
            <img src="images/index/shangpingtu1.jpg" class="w-100" alt="">
        </a>
        <a href="javascript:void(0)" class="d-block w-100 position-relative" style="color: rgb(255,255,255)">
            <div class="position-absolute">
                <p>聚财兽·钱钱 <br>大“桔”大利 财源滚滚好彩头</p>
            </div>
            <img src="images/index/shangpingtu2.jpg" class="w-100" alt="">
        </a>
        <a href="javascript:void(0)" class="d-block w-100 position-relative">
            <div class="position-absolute">
                <p>雪域牛乳芝士<br>经典之作 热销多年</p>
            </div>
            <img src="images/index/shangpingtu3.jpg" class="w-100" alt="">
        </a>
    </div>
    <!--    大商品展示 结束-->
    <!--底部导航栏 开始-->
    <ul class="nav nav-pills nav-fill fixed-bottom" id="footer_nav">
        <li class="nav-item">
            <a class="nav-link nav-active" href="javascript:;">
                <div class="img"></div>
                首页
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="list.html">
                <div class="img"></div>
                列表
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="cart.html">
                <div class="img"></div>
                购物袋
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="user.html">
                <div class="img"></div>
                我的
            </a>
        </li>
    </ul>
    <!--底部导航栏 结束-->
</div>
</body>
<script !src="">
</script>
</html>